<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body{
			margin:0; 
			padding:0; 
			height:100%; 
			width: 100%;
		}
		#wrapper{
			background:#ddd;
			display:grid;
		}
		#mapdiv{
			margin:0; 
			padding:0;
			grid-row: 1 / 3;
		}
    </style>
	<!-- Change the name of the webpage into each city. -->
    <title>Hong Kong</title>
	<script>
	//<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function back(){
		if(index === 1){
            document.getElementById("content1")
                    .style.display= "";
            document.getElementById("photo1")
                    .style.display= "";
            document.getElementById("content2")
                    .style.display= "none";
            document.getElementById("photo2")
                    .style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index++;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
			map.setCenter(lonLat2, zoom2);
			index = 1;
	}}
	
	<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function forward(){
		if(index === 1){
			document.getElementById("content1")
					.style.display= "";
			document.getElementById("photo1")
					.style.display= "";
			document.getElementById("content2")
					.style.display= "none";
			document.getElementById("photo2")
					.style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index = 2;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
            map.setCenter(lonLat2, zoom2);
			index--;
		}
	}
	</script>
</head>

<body bgcolor="#362619">

<table id ="top" width=100% height="110px" align="center" cellpadding="0" cellspacing="0" style="background:#362619">
  <tbody>
  <tr height=5%>
  </tr>
  <tr height=40%>
	<!-- Change the name of the headline of each city. -->
	<!-- p.s. "&nbsp;" means space here. -->
  	<td colspan="2" style="size:5px;color:#FFFFFF;font-family:lucida calligraphy;">&nbsp;&nbsp;Hong Kong</td>
  </tr>
  <tr height=30%>
	<!-- Change the name of the brief introduction of each city. -->
	<td colspan="2" style="size:2px;color:#C5D5D5;font-family:lucida calligraphy;">&nbsp;&nbsp;&nbsp;This is the fourth stop of the traveller's worldwide tour.</td>
  </tr>
  <tr height=25%>
    <!-- Link the corresponding webpage address after "href=" --> <!-- This part should be finished by Jiazhe at last. -->
	<th width="77%"></th>
	<th width="8%" style="text-align:center"><a id="link1" href="Calcutta.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> LAST STOP </a></th>
	<th width="8%" style="text-align:center"><a id="link2" href="Yokohama.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> NEXT STOP </a></th>
	<th width="7%" style="text-align:center"><a id="link3" href="../Main%20page.html  " style="size:2px;color:#C5D5D5;font-family:Calibri;">  RETURN  </a></th>
  </tr>
</table>

<div id="wrapper">
<div id="mapdiv" style="margin:0px; padding:0; background:#3E3D35; float:left; height:720px; width:100%; position:relative"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
<script>
        map = new OpenLayers.Map("mapdiv");
        map.addLayer(new OpenLayers.Layer.OSM());

        //Set start centre point and zoom
		//For Suez, the first and final point is (32.446568, 30.593634), shift the center lonlat a little bit to show the kml point on the left.
        var lonLat1 = new OpenLayers.LonLat(114.203551, 22.281527)
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
        var zoom1=16;
        
		//Set the second centre point and zoom
		var lonLat2 = new OpenLayers.LonLat(114.172089, 22.274121)
				.transform(
					new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
					map.getProjectionObject() // to Spherical Mercator Projection
				);
		var zoom2=16;
		

		map.setCenter(lonLat1, zoom1);
		
		var kmllayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./kml/Hong Kong.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });
        
		map.addLayer(kmllayer); 

		var index = 2;
	
</script>

<div align="center" id="photoShow" style="margin:0; padding:0; background:#3E3D35; float:left; height:450px; width:700px; position:absolute;top:135px;left:900px;">
    <button id="back" style="width:58px; height:89px; background:url(./icon/1.png); float:right; position:absolute; top:43%; margin-top:1px; left:1%; margin-left:1px; border:none" onclick="back();"></button>
    <button id="forward" style="width:58px; height:89px; background:url(./icon/2.png); float:right; position:absolute; top:43%; margin-top:1px; right:1%; margin-right:1px; border:none" onclick="forward();"></button>
    <!--Change the src of each scenic spot. -->
	<img id="photo1" src="./Photo/Victoria City.jpg" style="width:700px;">
	<img id="photo2" src="./Photo/Connaught Road Central.jpg" style="width:700px; display: none;">
</div>


<!-- Change the table height and to adjust the text window. -->
<table id ="content1" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">Victoria City</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">The City of Victoria, initially named Queenstown but was soon known as Victoria, was the de facto capital of Hong Kong during the British colonial period. It was one of the first urban settlements in Hong Kong and its boundaries are recorded in the Laws of Hong Kong.</br></br>
    With the expansion of urban areas, this name is now seldom used. Present-day Central is at the heart of Victoria City. Although the city expanded over much of what is now Kennedy Town, Sheung Wan, and Wan Chai, the name Victoria has been eclipsed by Central in popular usage.</td>
    <td width="10px"></td>
  </tr>
</table>



<!-- Change the table height and to adjust the text window. -->
<table id ="content2" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px; display: none;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;"></br>Connaught Road Central</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;"></br>Connaught Road is a major thoroughfare on the north shore of Hong Kong Island, Hong Kong. It links Shing Sai Road in Kennedy Town to the west and Harcourt Road in Admiralty to the east.</br></br>
    Connaught Road Central runs the length of Central, parallel to the north shore. It runs from approximately Admiralty in the east, where it connects Harcourt Road at the junction with Murray Road. The road ends west on Tai Street, where it becomes Connaught Road West.</td>
    <td width="10px"></td>
  </tr>
</table>


</div>

</body>
</html>